<html>
    <head>
        {% load static %}
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}">
        <link rel="stylesheet" type="text/css" href="{% static 'message/css/style.css' %}">
        <script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
        <script src="{% static 'js/bootstrap.min.js' %}"></script>
        <script src="{% static 'message/js/style.js' %}"></script>
        <title>Blog</title>
    </head>
    <body>
        <nav class="navbar navbar-expand-sm navbar-dark" style="background-color: rgba(0, 60,123,0.8);">
            <!-- Brand -->
            <a class="navbar-brand" href="{% url 'home:index' %}">Campus Survival Guide</a>
            <!-- Links -->
            <ul class="navbar-nav">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Blog</a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="{% url 'blog:index' %}">List</a>
                        <a class="dropdown-item" href="{% url 'blog:edit' %}">Create</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'message:index' 'generalActivity' %}">Activity</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'message:index' 'generalLearn' %}">Learn</a>
                </li>
          
                <!-- Dropdown -->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">architecture</a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="{% url 'message:index' 'library' %}">library</a>
                        <a class="dropdown-item" href="{% url 'message:index' 'teaching' %}">Teaching</a>
                        <a class="dropdown-item" href="{% url 'message:index' 'canteen' %}">canteen</a>
                        <a class="dropdown-item" href="{% url 'message:index' 'logistics' %}">Logistics</a>
                    </div>
                </li>
            </ul>
            <span class="user">
                {{ name }}
                <a href="{% url 'message:cancel' %}" class="small">Logout</a>
            </span>
        </nav>

      
        <div class="container" style="margin-top: 10px;">
            <table class="table table-striped">
                <thead style="font-weight: bold;">
                    <td>Sort</td>
                    <td>Title</td>
                    <td>Author</td>
                    <td>Introduction</td>
                    <td>Time</td>
                </thead>
                {% for i in data %}
                  <tr height="50">
                      <td width="100">{{i.sort}}</td>
                      <td width="200"><a href="{% url 'blog:detail' i.id i.id %}">{{i.title}}</a></td>
                      <td width="100"><a href="{% url 'blog:detail' i.id i.author %}">{{i.author}}</a></td>
                      <td width="600"><a href="{% url 'blog:detail' i.id i.id %}">{{i.introduction}}</a></td>
                      <td width="100">{{i.time}}</td>
                  </tr>
                {% endfor %}
            </table>
        </div>
        <div class="header" style="position:absolute;bottom: 0px;">
            <p class="text-center" style="position: relative;top:10px;font-size:12px;color:rgba(213,212,215, 0.8)">—— ©copyright Lingxi Kuang and Yifei Zhu All Rights Reserved. ——</p>
        </div>
        
    </body>

</html>